<style scoped lang="scss" type="text/scss">
  @import '~variables';

  .book-img{
    width: 114px;
    height: 160px;
  }
  .rank-img{
    width: 74px;
    height: 104px;
  }
  .top{
    background: #f8f8f8;
  }
  .topbar {
    background: orange;
    /*height: 45px;*/

    .logo-imgs {
      width: 80px;
    }
  }
  .mint-navbar{
    position: relative;
  }

  /*.sub-center{
    left: -5px;
    border-left: 0 none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .my-book{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }*/
</style>

<template>
  <div>
    <div class="pc-style">
      <div class="top border-bottom padding-top-s padding-bottom-s position-relative" style="border-bottom-color: #ccc;">
        <div class="main-style">
          <Button type="text" size="small" @click="reload">吉书阅读</Button>
          <!--<div class="position-absolute" style="right: 0;top: 5px;">-->
          <div class="float-right">
            <!--<div :class="{ 'display-none': !isLogin }">-->
            <div v-if="isLogin">
              <router-link :to="{path:'/login',query: { code: 'l' }}">
                <Button type="text" size="small">登录</Button>
              </router-link>
              <router-link :to="{path:'/login',query: { code: 'r' }}">
                <Button type="text" size="small">注册</Button>
              </router-link>
            </div>
            <!--<span>{{ username }}</span>-->
            <!--<Dropdown :class="{ 'display-none': isLogin }">-->
            <Dropdown v-else>
              <Button type="text" size="small">{{ username }}</Button>
              <DropdownMenu slot="list">
                <DropdownItem>
                  <Button type="text" size="small" @click="logout">登出</Button>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        </div>
      </div>
      <div class="padding-top-xl main-style">
        <div class="top-bar flex justify-center">
          <div class="logo flex-item">
            <Button type="text" @click="reload">
              <img src="@/assets/images/logo.png">
            </Button>
          </div>
          <div class="flex-item">
            <Input v-model="search">
            <Button slot="append" size="small" icon="ios-search" class="font-l"></Button>
            </Input>
          </div>
          <div class="flex-item align-center align-right">
            <Button type="ghost" size="large" class="my-book" @click="bookshelves">
              <i class="iconfont icon-books"></i>
              我的书架
            </Button>
            <!--<Button type="ghost" size="large" class="position-relative sub-center">-->
            <!--<i class="iconfont icon-books"></i>-->
            <!--订阅中心-->
            <!--</Button>-->
          </div>
        </div>

        <div class="slide-bar padding-top-m">
          <Tabs mode="horizontal" theme="light" :active-name="tabVal" @on-click="changeTabs">
            <TabPane v-for="item in tabList" :label="item.label" :name="item.value" :key="item.value"></TabPane>
            <!--<Button type="text" size="large" slot="extra">-->
            <!--<i class="iconfont icon-zuozhezhongxin"></i>-->
            <!--作者中心-->
            <!--</Button>-->
            <Button type="text" size="large" slot="extra" @click="recharge">
              <i class="iconfont icon-chongzhi"></i>
              充值
            </Button>
          </Tabs>
        </div>
      </div>
    </div>

    <div class="m-style">
      <div class="topbar padding position-relative">
        <div class="logo-imgs" @click="reload"><img src="@/assets/images/m-logo.png"></div>
        <div class="position-absolute" style="right: 0;top: 15px;">
          <i class="ivu-icon ivu-icon-ios-search font-l color-white margin-right" @click="showSearch"></i>
          <i class="iconfont icon-books color-white font-m margin-right" @click="bookshelves"></i>
          <i class="iconfont icon-chongzhi color-white font-m margin-right" @click="recharge"></i>
          <i class="ivu-icon ivu-icon-ios-person-outline margin-right font-l color-white" @click="login"></i>
        </div>
      </div>
      <mt-navbar :fixed="fixed" v-model="tabVal" @click.native="changeTabs(tabVal)">
        <mt-tab-item v-for="item in tabList" :id="item.value" :key="item.value">{{ item.label }}</mt-tab-item>
      </mt-navbar>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'v-header',
    props: {
      tabList: {
        type: Array,
        default () {
          return [
            { label: '首页',value: '' },
            { label: '全部作品',value: 'all' },
            { label: '排行榜',value: 'rank' }
          ]
        }
      },
      userInfo: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    data () {
      return {
        isLogin: true,
        username: '',
        search: '',
        tabVal: 'index',
        fixed: false
      }
    },
    created () {
      if (sessionStorage.getItem('userName') === '' || sessionStorage.getItem('userName') === null){
        this.username = ''
        this.isLogin = true
      } else {
        this.username = sessionStorage.getItem('userName')
        this.isLogin = false
      }
    },
    methods: {
      changeTabs (val) {
        if (val === 'index') {
          this.$router.push('/')
          return false
        }
        let obj = {}
        obj = this.tabList.find((item) => {
          return item.value === val
        })
        this.$emit('changeTab',obj)
      },
      // 刷新本页面
      reload () {
        this.$router.push('/')
      },
      // 登出
      logout () {
        this.$http.get('/api/auth/logout')
          .then((res) => {
            if (res.status){
              sessionStorage.setItem('userName','')
              this.username = ''
              this.$Message.success('登出成功')
              setTimeout(() => {
                this.$router.go(0)
              },1500)
            }
          })
      },
      // 我的书架
      bookshelves () {
        this.$router.push('/my/book-shelves')
      },
      // 充值
      recharge () {
        this.$router.push('/my/recharge')
      },

      // 显示搜索框
      showSearch () {
        this.$router.push('/book/search')
      },
      login () {
        this.$router.push({
          path: '/login',
          query: {
            code: 'l'
          }
        })
      }
    }
  }
</script>
